{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <title>__TITLE__</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="format-detection" content="telephone=no">
  <meta content="telephone=no" name="format-detection">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="__COMMON__/css/2/common.min.css">
  <script src="__COMMON__/js/zepto/zepto.min.js"></script>
  <style type="text/css">
    body {
      padding-bottom: 1em;
      background-color: #0d4278;
      color: #fff;
    }
    .gn-leader {
      text-align: center;
    }
    .gn-leader-footer {
      margin-top: 2em;
      padding: 1em 0;
      background-color: #072d54;
      color: #fff;
    }
    .gn-leader-footer img {
      width: 3em;
    }
    .gn-leader-footer figcaptin {
      display: block;
      margin-top: .5em;
    }
    .gn-shop-list {
      margin: 1.786em auto;
      padding: .3em;
      width: 93%;
      border: .5em solid #fff;
      background-color: #fff;
      color: #333;
    }
    .gn-shop-image {
      width: 5.857em;
    }
    .gn-shop-intro {
      position: relative;
      margin-left: .5em;
    }
    .gn-shop-name {
      margin-bottom: 2em;
      color: #042f57;
    }
    .gn-shop-price {
      color: #ea9e44;
      font-size: 1.4em;
    }
    .gn-shop-check {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 4.214em;
      height: 1.714em;
      line-height: 1.857em;
      text-align: center;
      border-radius: .3em;
      background-color: #767676;
      color: #fff;
    }
    .gn-shop-list.checked {
      background: #fff url(__STYLE__/Activity/Groupon/XJ_right.png) right bottom no-repeat;
      background-size: 1.5em;
      border-color: #00b339;
    }
    .gn-shop-list.checked .gn-shop-check {
      background-color: #00b339;
    }
    .gn-person-form {
      margin: 0 auto;
      width: 93%;
    }
    .gn-person-form label {
      display: block;
      margin-bottom: .2em;
      color: #8fcce4;
    }
    .gn-person-form input {
      background-color: #1c67b5;
      color: #fff;
      border: none;
    }
    .gn-submit {
      display: block;
      margin: 0 auto;
      width: 13em;
      height: 2.571em;
      background-color: #fff;
      color: #e67c3b;
      border: none;
    }
  </style>
</head>
<body>

  <!-- 引导展示层 -->
  <section class="gn-leader">
    
    <img src="__STYLE__/Activity/Groupon/XJ_logo2.jpg" alt="迅捷团购">

    <footer class="gn-leader-footer flex-row">
      <figure class="row-item">
        <img src="__STYLE__/Activity/Groupon/XJ_icon_c.jpg" alt="台式电脑">
        <figcaptin>电脑</figcaptin>
      </figure>
      <figure class="row-item">
        <img src="__STYLE__/Activity/Groupon/XJ_icon_b.jpg" alt="笔记本">
        <figcaptin>笔记本</figcaptin>
      </figure>
      <figure class="row-item">
        <img src="__STYLE__/Activity/Groupon/XJ_icon_i.jpg" alt="ipod">
        <figcaptin>iPod</figcaptin>
      </figure>
      <figure class="row-item">
        <img src="__STYLE__/Activity/Groupon/XJ_icon_p.jpg" alt="手机">
        <figcaptin>手机</figcaptin>
      </figure>
    </footer>
  </section>

  <form id="grouponForm" action="" method="post">

    <div id="gn-shop" class="gn-shop">
      <volist name="grouponList" id="vo">
      <div class="gn-shop-list flex-row flex-row-top">
        <figure class="gn-shop-image">
          <img src="{$vo.pic}" alt="">
        </figure>
        <div class="gn-shop-intro row-item row-item-7">
          <h5 class="gn-shop-name">{$vo.name}</h5>
          <p class="gn-shop-price">￥{$vo['groupon_price']*1}/{$vo['unit']}</p>
          <a class="gn-shop-check" href="javascript:;">选择</a>
        </div>
      </div>
      <input type="radio" name="product[{$vo.id}][count]" hidden value="1">
      </volist>
    </div>

    
    <section class="form gn-person-form">
      <div class="form-item">
        <label>姓名</label>
        <input type="text" name="name" required>
      </div>
      <div class="form-item">
        <label>电话</label>
        <input type="tel" name="tel" required>
      </div>
      <div class="form-item">
        <label>宿舍号</label>
        <input type="text" name="room_id" required>
      </div>
      <div class="form-item">
        <input type="hidden" name="sid" value="{$sid}">
        <button class="gn-submit" type="submit">立即抢购</button>  
      </div>
    </section>
  </form>

  <script type="text/javascript">

    var grouponForm = $("#grouponForm");
    grouponForm.on("submit", function(e) {
      e.preventDefault();
      $(".gn-submit").attr("disabled");
      var fd = $(this).serialize();
      $.post("__CONTROLLER__/apply", fd, function(response) {
        alert(response.msg);
        $(".gn-submit").removeAttr("disabled");
      });
    });

    $("#gn-shop").on("click", ".gn-shop-list", function() {
      $(this).toggleClass("checked");
      var radio = $(this).next("input[type='radio']");
      radio.prop("checked") ? radio.prop("checked", false) : radio.prop("checked", true);
    });
  </script>
</body>
</html>
